// 某学科各学校分别获得国家级、省部级奖项数。分别统计表4-1-1-0的各学校省级、国家级奖项数，再统计4-1-1-1、4-1-1-2的奖项数，画柱状图。
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Column } from '@ant-design/plots';

const DemoColumn = () => {
  const data = [
    {
      "level": "省级",
      "count": 41,
      "univ_name": "南昌大学"
    },
    {
      "level": "国家级",
      "count": 41,
      "univ_name": "东华理工大学"
    },
    {
      "level": "国家级",
      "count": 40,
      "univ_name": "江西理工大学"
    },
    {
      "level": "国家级",
      "count": 39,
      "univ_name": "华东交通大学"
    },
    {
      "level": "省级",
      "count": 37,
      "univ_name": "华东交通大学"
    },
    {
      "level": "省级",
      "count": 35,
      "univ_name": "江西理工大学"
    },
    {
      "level": "省级",
      "count": 35,
      "univ_name": "南昌航空大学"
    },
    {
      "level": "国家级",
      "count": 35,
      "univ_name": "南昌大学"
    },
    {
      "level": "国家级",
      "count": 34,
      "univ_name": "南昌航空大学"
    },
    {
      "level": "省级",
      "count": 32,
      "univ_name": "东华理工大学"
    },
    {
      "level": "国家级",
      "count": 26,
      "univ_name": "景德镇陶瓷学院"
    },
    {
      "level": "省级",
      "count": 33,
      "univ_name": "景德镇陶瓷学院"
    },
    {
      "level": "国家级",
      "count": 28,
      "univ_name": "江西农业大学"
    },
    {
      "level": "省级",
      "count": 37,
      "univ_name": "江西农业大学"
    },
    {
      "level": "国家级",
      "count": 39,
      "univ_name": "江西财经大学"
    },
    {
      "level": "省级",
      "count": 40,
      "univ_name": "江西财经大学"
    },
    {
      "level": "国家级",
      "count": 28,
      "univ_name": "江西师范大学"
    },
    {
      "level": "省级",
      "count": 30,
      "univ_name": "江西师范大学"
    }
  ];
  const config = {
    data,
    isGroup: true,
    xField: 'univ_name',
    yField: 'count',
    seriesField: 'level',

    /** 设置颜色 */
    // color: ['#1ca9e6', '#f88c24'],

    /** 设置间距 */
    // marginRatio: 0.1,
    label: {
      // 可手动配置 label 数据标签位置
      position: 'middle',
      // 'top', 'middle', 'bottom'
    },
    maxColumnWidth:50,
    yAxis: {
      label: {
        style: {
          fontSize: 16
        }
      }
    },
    xAxis: {
      label: {
        style: {
          fontSize: 16
        }
      }
    },
    legend: {
      position: 'top-left',
      itemName: {style: {fontSize: 18}},
    },
  };
  return <Column {...config} />;
};

export default DemoColumn
